<template>
  <div id="app">
    <h2 class="title">发布新课程</h2>
    <el-steps :space="500" :active="2" align-center finish-status="success">
      <el-step title="填写课程基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="提交审核"></el-step>
    </el-steps>
    <br /><br />
    <div class="content-class">
      <el-button type="primary" @click="addChapter" icon="el-icon-folder-add"
        >添加课程章节</el-button
      >
      <br />
      <br />
      <el-table :data="chapterList" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <!-- scope.row就等于chapterList里面的每一个chapter对象 -->
            <el-table
              class="innerTable"
              :data="scope.row.videoList"
              style="width: 100%"
            >
              <el-table-column type="index" label="编号" width="50">
              </el-table-column>
              <el-table-column label="视频名称" prop="videoOriginalName">
              </el-table-column>
              <el-table-column label="是否收费">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.isFree" type="danger">
                    <span>收费</span>
                  </el-tag>
                  <el-tag v-if="!scope.row.isFree" type="success">
                    <span>免费</span>
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="视频大小(MB)" prop="size">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-delete"
                    type="danger"
                    size="mini"
                    @click="deleteVideo(scope.row)"
                    >删除小节</el-button
                  >
                  <el-button
                    size="mini"
                    type="warning"
                    icon="el-icon-edit"
                    @click="showUpdateVideo(scope.row)"
                    >修改小节</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column type="index" label="编号" width="50">
        </el-table-column>
        <el-table-column label="章节名称" prop="title"> </el-table-column>
        <el-table-column label="排序">
          <template slot-scope="scope">
            <el-input
              @blur="changeSort(scope.row)"
              class="sort"
              v-model="scope.row.sort"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="gmtCreated"> </el-table-column>
        <el-table-column label="修改时间" prop="gmtModified"> </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-circle-plus-outline"
              type="primary"
              size="mini"
              @click="addVideo(scope.row)"
              >添加小节</el-button
            >
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="deleteChapter(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <br />
      <br />
      <el-button @click="prev">上一步</el-button>
      <el-button @click="next" type="primary">保存并下一步</el-button>
    </div>
    <!-- dialog弹窗 -->
    <el-dialog title="添加小节视频" :visible.sync="flag">
      <el-upload
        :auto-upload="false"
        ref="upload"
        :on-success="fileUploadSuccess"
        :on-error="fileUploadError"
        :limit="1"
        :action="'http://localhost:8081/video/videoUpload'"
        name="file"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <!-- 这里有一个点击事件 -->
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >上传到服务器</el-button
        >
      </el-upload>
      <br /><br />
      是否收费：&nbsp;&nbsp;&nbsp;<el-radio-group v-model="video.isFree">
        <el-radio :label="1">收费</el-radio>
        <el-radio :label="0">免费</el-radio>
      </el-radio-group>
      <br /><br /><br />
      <el-button type="primary" @click="saveVideo">保存</el-button>
    </el-dialog>
    <el-drawer
      title="小节视频"
      :visible.sync="flag2"
      direction="rtl"
      size="50%"
    >
      <video
        class="video"
        preload="auto"
        controls
        loop
        :src="videoResult.videoSourceId"
      ></video>
      <div class="drawer-box">
        <el-form>
            <el-form-item label="替换视频">
              <el-upload
                ref="upload"
                class="upload-demo"
                action="http://localhost:8081/video/videoUpload"
                :on-success="successVideo"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >替换原来小节视频</el-button
                >
                <span slot="tip" style="color: red" class="el-upload__tip">
                  只能上传mp4/avi文件，且不超过200Mb
                </span>
              </el-upload>
            </el-form-item>
          <el-form-item label="视频名称">
            <el-input
              v-model="videoResult.videoOriginalName"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="视频大小">
            {{ videoResult.size }}MB
          </el-form-item>
          <el-form-item label="视频时长">
            {{ videoResult.duration }}
          </el-form-item>
          <el-form-item label="视频章节">
            {{ videoResult.chapterName }}
          </el-form-item>
          <el-form-item label="视频课程">
            {{ videoResult.courseName }}
          </el-form-item>
          <el-form-item label="视频讲师">
            {{ videoResult.teacherName }}
          </el-form-item>
          是否收费：&nbsp;&nbsp;&nbsp;<el-radio-group v-model="video.isFree">
            <!-- 数据库里面存放的是 0和1
                  0false 1true 
               -->
            <el-radio :value="true">收费</el-radio>
            <el-radio :value="false">免费</el-radio>
          </el-radio-group>
          <el-form-item label="播放次数">
            {{ videoResult.playCount }}
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="updateVideo" type="primary">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      flag2: false,
      sort: "",
      chapter: {
        courseId: "",
        title: "",
      },
      chapterList: [],
      courseId: "",
      videoResult: {
        videoId: "",
        courseName: "",
        chapterName: "",
        teacherName: "",
        size: "",
        duration: "",
        title: "",
        videoOriginalName: "",
        videoSourceId: "",
        playCount: "",
        isFree: 0,
      },
      video: {
        courseId: "",
        chapterId: "",
        title: "",
        videoSourceId: "",
        videoOriginalName: "",
        isFree: "",
        duration: "",
        size: "",
      },
    };
  },
  created() {
    let id = this.$route.params.id;
    let reg = /^[0-9]*$/;
    if (!reg.test(id)) {
      this.$router.push("/courseinfo");
      return;
    }
    this.init(id);
    this.courseId = id;
  },
  methods: {
    init(id) {
      this.$http.get("/course/getChapterAll/" + id).then((res) => {
        this.chapterList = res.data.data;
      });
    },
    addChapter() {
      this.chapter.courseId = this.courseId;
      this.$prompt("请输入章节名称", "添加章节", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(({ value }) => {
        (this.chapter.title = value),
          this.$http.post("/chapter/addChapter", this.chapter).then((res) => {
            this.$message({
              message: "添加章节成功",
              type: "success",
            });
            //根据课程id查询到课程下所有章节和小节视频的
            this.init(this.courseId);
          });
      });
    },
    addVideo(chapter) {
      this.flag = true;
      this.video.chapterId = chapter.id;
      this.video.courseId = this.courseId;
    },
    deleteChapter(chapter) {
      this.$confirm("您是否要删除这个章节", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      }).then(() => {
        this.$http.get("/chapter/deleteChapter/" + chapter.id).then((res) => {
          this.$message({
            message: "删除章节成功",
            type: "success",
          });
          this.init(this.courseId);
        });
      });
    },
    deleteVideo(video) {
      this.$prompt("是否要删除小节视频", "删除小节视频", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      }).then(({ value }) => {
        (this.chapter.title = value),
          this.$http.post("/video/deleteVideo", video.id).then((res) => {
            this.$message({
              message: "删除小节视频成功",
              type: "success",
            });
            this.init(this.courseId);
          });
      });
    },
    prev() {
      this.$router.push("/courseinfo" + this.courseId);
    },
    next() {},
    changeSort(chapter) {
      if (chapter.sort == "") {
        this.$message.error("排序规则不能为空");
        this.init(this.courseId);
        return;
      }
      let reg = /^[a-zA-Z]*$/;
      if (!reg.test(chapter.sort)) {
        this.$message.error("排序规则不符合条件");
        this.init(this.courseId);
        return;
      }
      this.$http
        .get("/chapter/sort/" + chapter.id + "/" + chapter.sort)
        .then((res) => {
          this.init(this.courseId);
        });
    },
    //修改小节视频
    successVideo(res, file) {
      this.videoResult.duration = res.data.duration;
      this.videoResult.size = res.data.size;
      this.videoResult.title = res.data.title;
      this.videoResult.videoOriginalName = res.data.videoOriginalName;
      this.videoResult.videoSourceId = res.data.videoSourceId;
    },
    //上传成功的回调
    fileUploadSuccess(resp, file, fileList) {
      this.video.duration = resp.data.duration;
      this.video.size = resp.data.size;
      this.video.title = resp.data.title;
      this.video.videoOriginalName = resp.data.videoOriginalName;
      this.video.videoSourceId = resp.data.videoSourceId;
      this.$message({
        message: "上传小节视频成功",
        type: "success",
      });
    },
    //上传失败的回调
    fileUploadError(err, file, fileList) {},
    //点击上传的按钮
    submitUpload() {
      this.$refs.upload.submit();
    },
    saveVideo() {
      this.$http.post("/video/addVideo/",this.video).then((res) => {
        this.$message({
          message: "添加小节成功",
          type: "success",
        });
        this.flag = false;
        this.init(this.courseId);
      });
    },
    showUpdateVideo(video) {
      this.$http.get("/video/getVideo/" + video.id).then((res) => {
        console.log(res.data.data);
        if (res.data.data == null) {
          this.$message({
            message: "当前小节视频不存在请刷新页面",
            type: "success",
          });
          return;
        }
        this.videoResult = res.data.data;
        this.flag2 = true;
      });
    },
    updateVideo() {
      // this.$http.post("/video/updateVideo", this.videoResult).then((res) => {
      //   this.$message({
      //     type: "success",
      //     message: "修改小节视频成功",
      //   });
      //   this.flag2 = false;
      //   this.init();
      // });
    },
  },
};
</script>

<style scoped>
.title {
  margin: 20px;
  text-align: center;
}
.title {
  margin: 20px;
  text-align: center;
}
.innerTable {
  margin-left: 50px;
}
.sort {
  width: 50px;
}
.video {
  width: 100%;
  object-fit: fill;
  height: 450px;
}
.drawer-box {
  width: 70%;
  margin: 30px auto 0px;
  height: 100%;
}
</style>
